.header-title__wrapper {
  position: relative;
  background: url('../images/logobg.png');
  height: 153px;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-size: contain;
  flex: 0 1 auto;
}

.header-title {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url('../images/logo.png');
  width: 100%;
  height: 100%;
  background-size: auto 2.2vw;
  background-repeat: no-repeat;
  background-position-x: 50%;

  &--pvg {
    background-image: url('../images/logo-pvg.png');
  }
}

.main {
  position: relative;
  width: 100%;
  height: 100%;

  &__wrapper {
    flex: 1 1 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &__content {
    position: relative;
    width: 100%;
    height: 100%;

    &-timer {
      position: absolute;
      top: 2vw;
      right: 5%;
      font-size: var(--inner-bigger-size);
    }
  }

  &--left-border,
  &--right-border {
    background-image: url('../images/l-border.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width: 70px;
  }

  &--left-border {
    background-position-x: left;
    left: 10px;
  }

  &--right-border {
    background-image: url('../images/r-border.png');
    right: 10px;
    background-position-x: right;
  }
}

.footer {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  height: 5vw;
  margin-top: auto;
  background-image: url('../images/nav-bg.png');
  background-position: 0 bottom;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  justify-content: center;
  align-items: flex-end;

  &--nav-right,
  &--nav-left,
  &--nav-pvg {
    background-size: contain;
    width: 17vw;
    background-repeat: no-repeat;
    height: 100%;
    background-position-y: calc(100% - 5px);
    position: relative;
    display: flex;
    align-items: flex-end;
    opacity: 0.6;
    cursor: pointer;

    &.active {
      opacity: 1;
    }
  }

  &--nav-pvg {
    background-image: url('../images/nav-footer.png');
    width: 34vw;
  }

  &--nav-left {
    background-image: url('../images/nav-left.png');
  }

  &--nav-right {
    background-image: url('../images/nav-right.png');
    background-position-x: -2.5rem;
  }

  &--nav-left-text,
  &--nav-right-text,
  &--nav-pvg-text {
    background-image: url('../images/nav-txt1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;
    height: 60%;
    width: 100%;
  }

  &--nav-right-text {
    background-image: url('../images/nav-txt2.png');
    background-position-x: calc(50% - 20px);
  }
  &--nav-pvg-text {
    background-image: url('../images/nav-txt2.png');
  }

  &--checkbox__wrapper {
    position: absolute;
    top: 1.4vw;
    left: 50%;
    transform: translate(-50%);
    width: 17vw;
    display: flex;
    justify-content: center;
    padding-right: 2vw;
    z-index: 99;
  }

  &--checkbox {
    flex: 0 1 auto;
    font-size: var(--inner-text-size, 16px);
    cursor: pointer;
    user-select: none;
    opacity: 0.6;
    margin-right: var(--inner-padding--small);

    &-icon {
      display: inline-flex;
      width: 1vw;
      height: var(--inner-padding, 16px);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-right: 0.5rem;

      &.sha {
        background-image: url('../images/line-yellow.png');
      }
      &.pvg {
        background-image: url('../images/line-green.png');
      }
      &.airbus {
        background-size: contain;
        background-image: url('../images/chart-icon3.png');
      }
      &.cargo {
        background-size: contain;
        background-image: url('../images/chart-icon2.png');
      }
    }
    &.active {
      opacity: 1;
    }
  }
}
